{% extends "system_setup/base.html" %}

{% block page_link %}
    <script src="../../static/system_setup/js/new_user.js"></script>
    <link rel="stylesheet" href="../../static/system_setup/css/zTreeStyle/zTreeStyle.css">
    <link rel="stylesheet" href="../../static/system_setup/css/style.css">
{% endblock %}


{% block style %}
    <style>
        .add_class{
            background: #1E90FF;
        }
        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }
        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }
        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }

        .shade {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(36, 36, 36, 0.5);
            display: none;
            z-index: 10000;
        }
        .search1 {
            width: 300px;
            display: flex;
            float: right;
            margin: 10px 0;
            margin-right: 1%;
            /*border: 1px solid red;*/
        }
        .search1 input {
            vertical-align: middle;
            float: left;
        / / 左浮动 flex: 4;
            height: 30px;
            width: 230px;
            outline: none;
            border: 1px solid #0070c1;
            box-sizing: border-box;
        / / 盒子模型，怪异IE盒子模型，width = content + border * 2 + padding * 2 padding-left: 10 px;
            border-bottom-left-radius: 3px;
            border-top-left-radius: 3px;
        }
        .search1 button {
            float: right;
            flex: 1;
            height: 30px;
            width: 70px;
            line-height: 30px;
            background-color: #0070c1;
            color: white;
            border-style: none;
            outline: none;
            border-bottom-right-radius: 3px;
            border-top-right-radius: 3px;
        }
        .search1 button i {
            font-style: normal;
        }
        .search1 button:hover {
            font-size: 16px;
        }
    </style>
{% endblock %}



{% block right_content %}
    <div class="headline">
        <div style="width: 15%;height: 100%;line-height: 40px;float: left;padding-left: 1%;">
            <a href="new_user.html" style="color: #0b0b0b;">
                <i class="iconfont icon-xinzengyonghu"></i>
                <span> 新建用户</span>
            </a>
        </div>

        <div style="width: 7%;text-align: center;height: 100%;line-height: 40px;float: right;">
            <button style="height: 30px;width: 90%;background: #0070c1;color: #ffffff;border-radius: 3px" id="add_station" type="button" class="btn btn-default add-station" onclick=create_user()>提交</button>
        </div>
    </div>

    <div class="right-box" style="width: 30%;height: 93%;margin-left: 1%;">
        <div style="height: 40px;width: 100%;background: #0070c1;">
            <div style="width: 30%;line-height: 40px;color: #ffffff;font-size: 14px;text-align: center;">基本信息</div>
        </div>
        <div style="width: 100%;height: 90%;overflow: auto;">
            <div style="margin-top: 3%;margin-left: 5%;">
                <span style="color: red;">*</span>
                <label for=""> 姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</label>
                <input id="real_name" type="text" placeholder="姓名" style="padding-left: 5px;width: 60%;border-radius: 3px;border: #cfcfcf solid 1px;height: 30px;line-height: 30px;">
            </div>
            <div style="margin-top: 3%;margin-left: 5%;">
                <span style="color: red;">*</span>
                <label for=""> 登录账号：</label>
                <input id="username" type="text" placeholder="登录账号" style="padding-left: 5px;width: 60%;border-radius: 3px;border: #cfcfcf solid 1px;height: 30px;line-height: 30px;">
            </div>
            <div style="margin-top: 3%;margin-left: 5%;">
                <span style="color: red;">*</span>
                <label for=""> 登录密码：</label>
                <input id="password" type="text" placeholder="登录密码" style="padding-left: 5px;width: 60%;border-radius: 3px;border: #cfcfcf solid 1px;height: 30px;line-height: 30px;">
            </div>
            <div style="margin-top: 3%;margin-left: 5%;">
                <span style="color: red;">*</span>
                <label for=""> 所属部门：</label>
                <input id="department" type="text" placeholder=" 所属部门" style="padding-left: 5px;width: 60%;border-radius: 3px;border: #cfcfcf solid 1px;height: 30px;line-height: 30px;" onclick="show_model()">
            </div>
            <div style="margin-top: 3%;margin-left: 5%;">
                <span style="color: red;">*</span>
                <label for=""> 性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：</label>
                <select name="" id="gender" style="width: 60%;border: #CFCFCF solid 1px;height: 30px;border-radius: 3px;">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
            <div style="margin-top: 3%;margin-left: 5%;">
                <span style="color: red;visibility: hidden;">*</span>
                <label for=""> 学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;历：</label>
                <select name="" id="education" style="width: 60%;border: #CFCFCF solid 1px;height: 30px;border-radius: 3px;">
                    <option value="中专">中专</option>
                    <option value="大专">大专</option>
                    <option value="本科">本科</option>
                    <option value="硕士">硕士</option>
                    <option value="博士">博士</option>
                    <option value="博士后">博士后</option>
                    <option value="其他">其他</option>
                </select>
            </div>
            <div style="margin-top: 3%;margin-left: 5%;">
                <span style="color: red;visibility: hidden;">*</span>
                <label for=""> 婚姻状况：</label>
                <select name="" id="marital_status" style="width: 60%;border: #CFCFCF solid 1px;height: 30px;border-radius: 3px;">
                    <option value="未婚">未婚</option>
                    <option value="已婚">已婚</option>
                </select>
            </div>
            <div style="margin-top: 3%;margin-left: 5%;">
                <span style="color: red;visibility: hidden;">*</span>
                <label for=""> 政治面貌：</label>
                <select name="" id="political_outlook" style="width: 60%;border: #CFCFCF solid 1px;height: 30px;border-radius: 3px;">
                    <option value="群众">群众</option>
                    <option value="团员">团员</option>
                    <option value="党员">党员</option>
                </select>
            </div>
            <div style="margin-top: 3%;margin-left: 5%;">
                <div style="display: inline-block;vertical-align: center;text-align: right;padding-top: 30px;">
                    <span style="color: red;visibility: hidden;">*</span>
                    <label for="" style="vertical-align: top;"> 签名图片：</label>
                    <a href="javascript:;" class="file"><i class="iconfont icon-upload"></i> 上传<input type="file" name="" id="signature_picture" onchange="upload_signature_picture()"></a>
                </div>
                <div style="display: inline-block;vertical-align: top;width: 235px;text-align: right;border: #cfcfcf dashed 1px;height: 100px;" id='signature_picture_url_div'>
                   <img id='signature_picture_url_img' src="" style="display: none;width: 235px;height: 100px;">
                </div>
            </div>
            <div style="margin-top: 3%;margin-left: 5%;">
                <span style="color: red;visibility: hidden;">*</span>
                <label for="" style="vertical-align: top;"> 备注说明：</label>
                <textarea name="" id="remarks" cols="30" rows="3" style="width: 60%;border-color: #cfcfcf;border-radius: 3px;outline: none;"></textarea>
            </div>
        </div>
    </div>

    <div class="right-box" style="width: 68%;height: 93%;font-size: 0;">
        <div style="width: 100%;height: 40px;background: #0070c1;">
            <div style="width: 12%;line-height: 40px;color: #ffffff;font-size: 14px;text-align: center;">个人档案</div>
        </div>
        <div style="width: 100%;height: 93%;font-size: 14px;overflow: auto;">
            <div style="margin-top: 1%;margin-left: 3%;width: 95%;">
                <span style="color: red;visibility: hidden;">*</span>
                <label> 民&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;族：</label>
                <input id="nation" type="text" placeholder="民族" style="padding-left: 5px;width: 60%;border-radius: 3px;border: #cfcfcf solid 1px;height: 30px;line-height: 30px;">
            </div>
            <div style="margin-top: 1%;margin-left: 3%;width: 95%;">
                <span style="color: red;visibility: hidden;">*</span>
                <label for=""> 身份证号：</label>
                <input id="ID_number" type="text" placeholder="身份证号" style="padding-left: 5px;width: 60%;border-radius: 3px;border: #cfcfcf solid 1px;height: 30px;line-height: 30px;">
            </div>
            <div style="margin-top: 1%;margin-left: 3%;width: 95%;">
                <span style="color: red;visibility: hidden;">*</span>
                <label> 籍&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;贯：</label>
                <input id="native_place" type="text" placeholder="籍贯" style="padding-left: 5px;width: 60%;border-radius: 3px;border: #cfcfcf solid 1px;height: 30px;line-height: 30px;">
            </div>
            <div style="margin-top: 1%;margin-left: 3%;width: 95%;">
                <span style="color: red;visibility: hidden;">*</span>
                <label> 专&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;业：</label>
                <input id="major" type="text" placeholder="专业" style="padding-left: 5px;width: 60%;border-radius: 3px;border: #cfcfcf solid 1px;height: 30px;line-height: 30px;">
            </div>
            <div style="margin-top: 1%;margin-left: 3%;width: 95%;">
                <span style="color: red;visibility: hidden;">*</span>
                <label> 毕业院校：</label>
                <input id="graduated_university" type="text" placeholder="毕业院校" style="padding-left: 5px;width: 60%;border-radius: 3px;border: #cfcfcf solid 1px;height: 30px;line-height: 30px;">
            </div>
            <div style="margin-top: 1%;margin-left: 3%;width: 95%;">
                <span style="color: red;visibility: hidden;">*</span>
                <label> 职&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称：</label>
                <input id="position" type="text" placeholder="职称" style="padding-left: 5px;width: 60%;border-radius: 3px;border: #cfcfcf solid 1px;height: 30px;line-height: 30px;">
            </div>
            <div style="margin-top: 1%;margin-left: 3%;width: 95%;">
                <span style="color: red;visibility: hidden;">*</span>
                <label> 家庭住址：</label>
                <input id="home_address" type="text" placeholder="家庭住址" style="padding-left: 5px;width: 60%;border-radius: 3px;border: #cfcfcf solid 1px;height: 30px;line-height: 30px;">
            </div>
            <div style="margin-top: 1%;margin-left: 3%;width: 95%;">
                <span style="color: red;visibility: hidden;">*</span>
                <label> 电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话：</label>
                <input id="mobile" type="text" placeholder="电话" style="padding-left: 5px;width: 60%;border-radius: 3px;border: #cfcfcf solid 1px;height: 30px;line-height: 30px;">
            </div>
            <div style="margin-top: 1%;margin-left: 3%;width: 95%;">
                <span style="color: red;visibility: hidden;">*</span>
                <label> 邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱：</label>
                <input id="mailbox" type="text" placeholder="邮箱" style="padding-left: 5px;width: 60%;border-radius: 3px;border: #cfcfcf solid 1px;height: 30px;line-height: 30px;">
            </div>
            <div style="margin-top: 1%;margin-left: 3%;width: 95%;">
                <span style="color: red;visibility: hidden;">*</span>
                <label> 毕业院校：</label>
                <input id="graduated_university" type="text" placeholder="毕业院校" style="padding-left: 5px;width: 60%;border-radius: 3px;border: #cfcfcf solid 1px;height: 30px;line-height: 30px;">
            </div>
            <div style="margin-top: 1%;margin-left: 3%;width: 95%;">
                <span style="color: red;visibility: hidden;">*</span>
                <label style="vertical-align: top;"> 备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：</label>
                <textarea name="" id="" cols="30" rows="5" style="width: 60%;border-color: #cfcfcf;border-radius: 3px;outline: none;"></textarea>
            </div>
            <div style="margin-top: 1%;margin-left: 3%;width: 95%;">
                <span style="color: red;visibility: hidden;">*</span>
                <label style="vertical-align: top;"> 上传附件：</label>
                <a href="javascript:;" class="file">
                    上传附件
                    <input type="file" name="" id="enclosure">
                </a>
            </div>
        </div>
    </div>

    <div id="new_models1" class="shade" style="display: none">
        <div id="new_models" style="width: 100%;height: 100%;position: absolute;">
            <div style="width: 700px;height: 500px;background: #F5F5F5;z-index: 10000;position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);border-radius: 3px;border: #dfdfdf solid 1px;">
                <div id="box"
                     style="width: 100%;height: 50px;background: #f4f7fa;cursor: move;border-top-left-radius: 5px;border-top-right-radius: 5px;">
                    <h5 id="modal-title" class="modal-title"
                        style="line-height: 50px;width: 15%;margin-left: 1%;display: inline-block;">所属科室</h5>

                    <span onclick="close_models()"
                          style="float: right;line-height: 50px;padding-right: 2%;cursor: pointer;"><i
                            class="iconfont icon-quchu"></i></span>

                    <div class="search1" style="vertical-align: center;display: inline-block;text-align: right;margin-left: 35%;font-size: 14px;">
                        <input type="text" placeholder="请输入..." name="" id="search_data1" value="">
                        <button onclick="search_dep()" id="search_button">搜索</button>
                    </div>
                </div>
                <hr>
                <div style="height: 400px;width: 100%;padding-top: 2%;padding-left: 2%;overflow: auto;">
                    <div id="processed" style="width: 100%;height: 500px;overflow: auto;vertical-align: top;left: 0;padding-left: 2%;">
                        {% for company in company_list %}
                            <div style="display: inline-block;width: 300px;height: 30px;line-height: 30px;font-size: 14px;color: #0b0b0b;">
                                <input class="check_box" id="{{ company.name }}({{ company.id }})" type="checkbox"> {{ company.name }}
                            </div>
                        {% endfor %}
                    </div>
                </div>
                <hr>
                <div style="width: 100%;height: 50px;text-align: right;padding-right: 2%;">
                    <button onclick="summit_val()"
                            style="width: 100px;height: 30px;border: #dfdfdf solid 1px;margin-top: 10px;border-radius: 3px;background: #1E90FF;color: white;">
                        提交
                    </button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script>
        var company_list = {{ company_list | safe }};
        function search_dep(){
            var search_keyword = document.getElementById("search_data1").value;
            var processed = document.getElementById("processed");
            processed.innerHTML = "";
            console.log(company_list.length)
            for (var h=0; h<company_list.length; h++){
                if (company_list[h]["name"].indexOf(search_keyword) !== -1){
                    console.log(company_list[h]["name"])
                    var div_tag = document.createElement("div");div_tag.className="div_clase";
                    div_tag.innerHTML = '<input class="check_box" id="'+company_list[h]["name"]+'('+ company_list[h]["id"]+')'+'" type="checkbox"> '+ company_list[h]["name"];
                    processed.appendChild(div_tag)
                }
            }
        }

        function show_model() {
            document.getElementById("new_models1").style.display = "table-row";
        }

        function close_models1() {
            document.getElementById("new_models1").style.display = "none";
        }

        let title = document.querySelector("#box");
        let addForm = document.querySelector("#new_models");

        title.addEventListener("mousedown", function (e) {
            let x = e.pageX - addForm.offsetLeft;
            let y = e.pageY - addForm.offsetTop;

            document.addEventListener("mousemove", move);

            function move(e) {
                addForm.style.left = e.pageX - x + 'px';
                addForm.style.top = e.pageY - y + 'px';
            }

            document.addEventListener("mouseup", function (e) {
                document.removeEventListener("mousemove", move);
            })
        });

        function summit_val() {
            var cleck_box_list = document.getElementsByClassName("check_box");
            var xuanzhong = ""
            for (var t=0; t<cleck_box_list.length; t++){
                if (cleck_box_list[t].checked){
                    xuanzhong = xuanzhong+cleck_box_list[t].id+", "
                }
            }
            document.getElementById("department").value=xuanzhong.slice(0, -2);
            document.getElementById("new_models1").style.display = "none";
        }

    </script>
{% endblock %}
